<html>
  <head>
    <script type="application/javascript">
      function draw() {
        var ctx = document.getElementById("canvas").getContext("2d");
        // 移动画布
        ctx.translate(75, 75);

        for (var i = 1; i < 6; i++) {
          // Loop through rings (from inside to out)
          ctx.save();
          // 每一层的填充颜色
          ctx.fillStyle = "rgb(" + 51 * i + "," + (255 - 51 * i) + ",255)";
          // 每一层圆的个数
          for (var j = 0; j < i * 6; j++) {
            // draw individual dots
            ctx.rotate((Math.PI * 2) / (i * 6));
            ctx.beginPath();
            ctx.arc(0, i * 12.5, 5, 0, Math.PI * 2, true);
            ctx.fill();
          }
          ctx.restore();
        }
      }
    </script>
  </head>
  <body onload="draw();">
    <canvas id="canvas" width="300" height="300"></canvas>
  </body>
</html>
<style></style>
